/* eslint-disable react-hooks/exhaustive-deps */
import { XoProTable } from '@/components/XoProTable'
import React, { useContext, useEffect } from 'react'
import { Row, Descriptions, Statistic, Empty, ConfigProvider } from 'antd';
import styles from './index.less'
import ReactEcharts from "echarts-for-react";
import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
import type { CountByUser } from '@/services/student';
import { getGradeContrast } from '@/services/student';
import { getCountByGrade, getCountByUser } from '@/services/student';
import { useState } from 'react';
import { CourseContext } from '..';
import { echartOption } from '@/utils/echartsUtils';
import { Link } from 'umi';
export default function PlayChess() {
  const ctx = useContext(CourseContext);

  const [dataInfo, setDataInfo] = useState<CountByUser>({})
  const [gradeInfo, setGrade] = useState<CountByUser>({})
  const [List, setList] = useState<any>([])
  const { oldPlayGradeName, addedPlayScore, oldPlayScore, playGradeName, playScore } = gradeInfo || {}
  const { allCount, monthDrawCount, allDrawCount, allFailCount, allWinCount
    , monthFailCount, monthTotalCount, monthWinCount, weekDrawCount,
    weekFailCount, weekTotalCount, weekWinCount } = dataInfo || {}

  useEffect(() => {
    (async () => {
      const res = await getCountByUser({ uid: ctx.uid, activityId: ctx.courseId });
      setDataInfo(res.result);
    })();
    (async () => {
      const res = await getGradeContrast({ uid: ctx.uid, activityId: ctx.courseId });
      setGrade(res.result);
    })();
    (async () => {
      const res = await getCountByGrade({ uid: ctx.uid })
      setList(res.result)
    })()
  }, [ctx])


  const dataList = [
    { value: allWinCount, name: `胜利`, color: 'green' },
    { value: allFailCount, name: `失败`, color: 'red' },
    { value: allDrawCount, name: `和棋`, color: 'yellow' },
  ]
  const dataList1 = [
    { value: monthWinCount, name: `胜利`, color: 'green' },
    { value: monthFailCount, name: `失败`, color: 'red' },
    { value: monthDrawCount, name: `和棋`, color: 'yellow' },
  ]
  const dataList2 = [
    { value: weekWinCount, name: `胜利`, color: 'green' },
    { value: weekFailCount, name: `失败`, color: 'red' },
    { value: weekDrawCount, name: `和棋`, color: 'yellow' },
  ]

  const columns = [
    {
      dataIndex: 'playGradeName',
      title: '棋士品级',
    },
    {
      dataIndex: 'totalCount',
      title: '对弈盘数',
    },
    {
      dataIndex: 'winCount',
      title: '对弈胜利数',
    },
    {
      dataIndex: 'winRate',
      title: '对弈胜率',
      render: (text: any) => (
        <span>{text}%</span>
      )
    },
    {
      dataIndex: 'failCount',
      title: '对弈失败数',

    },
    {
      dataIndex: 'drawCount',
      title: '和棋数',

    },
  ]
  const customizeRenderEmpty = () => (
    //这里面就是我们自己定义的空状态

    <div style={{ textAlign: 'center' }}>
      <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={'还没有对弈记录哦'} />
    </div>
  );
  return (
    <div className={styles.play_container}>
      <Descriptions style={{ marginBottom: "20px" }} layout="vertical" bordered>
        <Descriptions.Item labelStyle={{ fontWeight: 'bold' }} label="开课前对弈积分">{oldPlayScore || 0}</Descriptions.Item>
        <Descriptions.Item labelStyle={{ fontWeight: 'bold' }} label="当前对弈积分">{playScore}</Descriptions.Item>
        <Descriptions.Item labelStyle={{ fontWeight: 'bold' }} label="提升">
          <Row align="middle">
            <div style={{ marginRight: '8px' }}>{oldPlayGradeName}{oldPlayGradeName ? '→' : null}{playGradeName}</div>
            {
              addedPlayScore ?
                Number(addedPlayScore) >= 0 ?
                  <Statistic
                    value={addedPlayScore}
                    valueStyle={{ color: '#cf1322' }}
                    prefix={<ArrowUpOutlined />}
                  /> : <Statistic
                    value={addedPlayScore}
                    valueStyle={{ color: '#3f8600' }}
                    prefix={<ArrowDownOutlined />}
                  /> : null
            }
          </Row>
        </Descriptions.Item>
      </Descriptions>


      <Row justify="space-between">
        <div style={{ fontWeight: 'bold' }}>品级数据</div>
        <Link key="one" to={`/course/chess?id=${ctx?.uid}`} target="_blank">
          <a>查看棋谱</a>
        </Link>
      </Row>
      <ConfigProvider renderEmpty={customizeRenderEmpty}>
        <XoProTable
          search={false}
          pagination={false}
          hasIndex={false}
          options={false}
          columns={columns}
          dataSource={List}
        />
      </ConfigProvider>
      <div>
        <Row style={{ marginTop: '20px' }}>
          <div style={{ flex: 1, marginBottom: '15px', position: 'relative' }}>
            <div className={styles.font}>累计对局（{dataInfo?.allCount || 0}）</div>
            {
              allCount ? <>
                <ReactEcharts notMerge option={echartOption(dataList)} />
              </> : <Empty description={'还没有对弈记录哦'} style={{ position: "relative", top: "50%", transform: 'translateY(-50%)' }} image={Empty.PRESENTED_IMAGE_SIMPLE} />
            }
          </div>

          <div style={{ flex: 1, marginBottom: '15px', position: 'relative' }}>
            <div className={styles.font}>本月对局（{dataInfo?.monthTotalCount || 0}）</div>
            {
              monthTotalCount ? <>
                <ReactEcharts notMerge option={echartOption(dataList1)} />
              </> : <Empty description={'还没有对弈记录哦'} style={{ position: "relative", top: "50%", transform: 'translateY(-50%)' }} image={Empty.PRESENTED_IMAGE_SIMPLE} />
            }
          </div>
          <div style={{ flex: 1, marginBottom: '15px', position: 'relative' }}>
            <div className={styles.font}>本周对局（{dataInfo?.weekTotalCount || 0}）</div>
            {
              weekTotalCount ? <>
                <ReactEcharts notMerge option={echartOption(dataList2)} />
              </> : <Empty description={'还没有对弈记录哦'} style={{ position: "relative", top: "50%", transform: 'translateY(-50%)' }} image={Empty.PRESENTED_IMAGE_SIMPLE} />
            }
          </div>
        </Row>
      </div>
    </div>
  )
}
